<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta content="Điện thoại di động" name="author"/>
        <h:outputStylesheet name="./css/reset.css"/>
        <h:outputStylesheet name="./css/style.css"/>
        <h:outputScript name="./js/main.js"/>
        <h:outputStylesheet name="./css/CalendarControl.css"/>
        <h:outputScript name="./js/CalendarControl.js"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <title><ui:insert name="head"/></title>
        <script>
            $(document).ready(function() {

                $("#content .product-list-wrapper .product-list li").hover(function() {
                    $(this).find(".more-detail").animate({top: 0}, {duration: 500, queue: !1, complete: function() {
                        }});
                }, function() {
                    $(this).find(".more-detail").animate({top: 220}, {duration: 500, queue: !1, complete: function() {
                        }});
                });
                
                $("#checklogin .menu-login").hover(function(){
                   $("#loggedin_dropdown").slideDown("fast");
                   }, function(){
                   $("#loggedin_dropdown").hide();
                });
            });
        </script>
    </h:head>

    <h:body>
        <div id="wrapper">
            <div id="header">
                <div id="logo"><a href="/"><img alt="Mobile Shop Online" src="#{resource['images/logo.gif']}"/></a></div>
                
                <!--Login Box-->
                <div style="float: right;" id="checklogin">
                    <h:form>
                        <c:if test="#{productManaged.isLoger != true}">
                            <div class="loginbox">
                                <a class="login" href="http://localhost:8080/MobileShop/dang-nhap.html">Đăng nhập</a>
                                <a class="login" href="http://localhost:8080/MobileShop/dang-ky.html">Đăng ký</a>
                            </div>
                        </c:if>

                        <c:if test="#{productManaged.isLoger}">
                            <h:form>
                                <div class="menu-login">
                                    <a class="postlogin" title="Đăng nhập với tên #{customerLogin.customerLogin.person.name}">
                                        <h:graphicImage name="images/avatar.jpg" style="width: 32px; height: 32px;"/>
                                        <span class="customername">#{customerLogin.customerLogin.person.name}</span>
                                    </a>
                                    <ul id="loggedin_dropdown">
                                        <li class="ddStaticTxt"></li>
                                        <li>
                                            <a class="iconupdate" href="http://localhost:8080/MobileShop/thong-tin-khach-hang.html">Thông tin khách hàng</a>
                                        </li>
                                        <li>
                                            <a class="iconpayment" href="http://localhost:8080/MobileShop/tinh-trang-don-hang.html">Tình trạng đơn hàng</a>
                                        </li>
                                        <li class="ddStaticTxt"></li>
                                        <li class="divider"></li>
                                        <li>
                                            <h:commandButton action="#{customerLogin.logout()}"  value="Đăng xuất" title="Đăng xuất"/>
                                        </li>
                                        <li class="ddStaticTxt"></li>
                                    </ul>
                                </div>
                            </h:form>
                        </c:if>
                    </h:form>
                </div>
                
                <div id="top-search">
                    <h:form>
                        <span class="input"><h:inputText id="top-keyword" title="Nhập từ khóa tìm kiếm..." value="Nhap tu khoa tim kiem"/></span>
                        <h:commandButton style="height: 27px; width: 96px;" class="submit-search" title="Tim kiem" value="Tim kiem" />
                    </h:form>
                </div>

                <div id="top-menu-c">
                    <div id="top-menu">
                        <h:form>
                            <ul>
                                <li>
                                    <h:commandLink action="pretty:trangchu">
                                        <span>Trang chủ</span>
                                    </h:commandLink>
                                </li>
                                <li>
                                    <h:commandLink actionListener="#{productManaged.chooseMenuMobile()}" action="pretty:productmobile">
                                        <span>Điện thoại</span>
                                    </h:commandLink>
                                </li>
                                <li>
                                    <h:commandLink actionListener="#{productManaged.chooseMenuOldProduct()}" action="pretty:oldproduct">
                                        <span>Hàng cũ</span>
                                    </h:commandLink>
                                </li>
                                <li>
                                    <h:commandLink actionListener="#{productManaged.chooseMenuTablet()}" action="pretty:oldproduct">
                                        <span>Máy tính bảng</span>
                                    </h:commandLink>
                                </li>
                                <li>
                                    <h:commandLink actionListener="#{productManaged.chooseMenuAccessoryProduct()}" action="pretty:productaccessory">
                                        <span>Phụ kiện</span>
                                    </h:commandLink>
                                </li>
                                <li><a href="/bao-gia"><span>Báo giá</span></a></li>
                                <li><a href="/tin-tuc"><span>Tin tức</span></a></li>
                                <li>
                                    <h:commandLink action="pretty:introduction">
                                        <span>Giới thiệu</span>
                                    </h:commandLink>
                                </li>
                                <li>
                                    <h:commandLink action="pretty:contact">
                                        <span>Liên hệ</span>
                                    </h:commandLink>
                                </li>
                            </ul>
                        </h:form>
                    </div>
                    <div id="top-shopping">
                        <a href="http://localhost:8080/MobileShop/product/checkout.html" style="float: right; top: 5px; right: 10px;">
                            <h:graphicImage name="./images/shopping.png" style="float: right; width: 40px; height: 38px; padding-right: 10px;"/>
                            <p style="float: right; padding-top: 10px; color: #FF0000;">Có #{productManaged.productQuantityList.size()} Sản Phẩm</p>
                        </a>
                    </div>
                </div>
                <div id="page">
                    <div id="leftmenu">
                        <div id="header-blue">
                            <span class="title">Hãng điện thoại</span>
                            <h:form>
                                <ul class="brands">
                                    <c:forEach var="manu" items="#{productManaged.manufacturerList}">
                                        <li>
                                            <h:commandLink actionListener="#{productManaged.chooseMenuMobile()}" action="pretty:productmobilebymanufacturer" value="#{manu.name}">
                                                <f:setPropertyActionListener value="#{manu.manufacturerId}" target="#{productManaged.manufacturerid}"/>
                                            </h:commandLink>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </h:form>
                        </div>

                        <!--May Tinh Bang-->
                        <div class="box-accessories">
                            <span class="title">Máy tính bảng</span>
                            <h:form>
                                <ul class="accessories">
                                    <c:forEach var="manufac" items="#{productManaged.manufacturerList}">
                                        <li>
                                            <h:commandLink actionListener="#{productManaged.chooseMenuTablet()}" action="pretty:producttablet" value="#{manufac.name}">
                                                <f:setPropertyActionListener value="#{manufac.manufacturerId}" target="#{productManaged.manufacturerid}"/>
                                            </h:commandLink>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </h:form>
                        </div>

                        <!--Phu kien-->
                        <div class="box-accessories">
                            <span class="title">Danh mục phụ kiện</span>
                            <h:form>
                                <ul class="accessories">
                                    <li>
                                        <h:commandLink actionListener="#{productManaged.chooseMenuAccessoryProduct()}" action="pretty:productaccessory" value="Phụ kiện">
                                        </h:commandLink>
                                    </li>
                                    <li><a href="/phu-kien/phu-kien-ipad-10-p1.html">Phụ kiện Ipad</a></li>
                                    <li><a href="/phu-kien/phu-kien-iphone-11-p1.html">Phụ kiện Iphone</a></li>
                                    <li><a href="/phu-kien/tai-nghe-bluetooth--2-p1.html">Tai nghe Bluetooth </a></li>
                                    <li><a href="/phu-kien/tai-nghe-day--8-p1.html">Tai nghe dây </a></li>
                                    <li><a href="/phu-kien/the-nho---usb-flash-4-p1.html">Thẻ nhớ - USB Flash</a></li>
                                    <li><a href="/phu-kien/-vo-may---bao-da-3-p1.html"> Vỏ máy - Bao da</a></li>
                                    <li><a href="/phu-kien/phan-mem-6-p1.html">Phần mềm</a></li>
                                    <li><a href="/phu-kien/pin---sac-pin-9-p1.html">Pin - Sạc pin</a></li>
                                    <li><a href="/phu-kien/thiet-bi-ket-noi-5-p1.html">Thiết bị kết nối</a></li>
                                    <li><a href="/phu-kien/cac-thiet-bi-khac-7-p1.html">Các thiết bị khác</a></li>
                                </ul>
                            </h:form>
                        </div>
                    </div>

                    <div id="content" >
                        <ui:insert name="content"/>
                    </div>
                </div>
                <div style="clear: both;"></div>

                <div id="footer">
                    <div class="footer-wrapper">
                        <div class="footer-l">
                            <span><strong>Chi nhánh 1:</strong> 142 Nguyễn Oanh, TP Hồ Chí Minh. <strong>Điện thoại:</strong> 01664432922</span>
                            <span><strong>Chi nhánh 2:</strong> 142 Nguyễn Oanh, TP Hồ Chí Minh. <strong>Điện thoại:</strong> 01664432922</span>
                            <span><strong>Chi nhánh 3:</strong> 142 Nguyễn Oanh, TP Hồ Chí Minh. <strong>Điện thoại:</strong> 01664432922</span>
                          
                        </div>
                        <div class="footer-r">
                            <ul>
                                <li><a href="/">Trang chủ</a></li>
                                <li><a href="/dien-thoai">Điện thoại</a></li>
                                <li><a href="/may-tinh-bang">Máy tính bảng</a></li>
                                <li><a href="/phu-kien">Phụ kiện</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="copyright"><p>Copyright © 2013 by Mobile Shop. All Rights Reserved.</p></div>
                </div>
            </div>
        </div>

    </h:body>

</html>